/* eslint-disable no-unused-vars */
<template>
  <a-form ref="addConfig">
    <a-form-item label="sku编码" :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }">
      <a-input
        v-model="form.transformName"
        placeholder="请输入sku名称，长度不超过50!!"
        v-decorator="['sku名称', { rules: [{ required: true, message: '请输入sku名称！' }] }]"
      />
    </a-form-item>

<a-row :gutter="24">
            <a-col span="12">
                    <a-form-item label="转前sku" :label-col="{ span: 10 }" :wrapper-col="{ span: 12 }">
                        <a-input
                                v-model="form.fromProductCode"
                                placeholder="请输入转单sku!!"
                                v-decorator="['转单sku', { rules: [{ required: true, message: '请输入转单sku!' }] }]"
                        />
                    </a-form-item>
            </a-col>
</a-row>
<a-row>
  <a-form-item label="下单渠道" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
              <a-spin v-if="distchChannel.length==0" />
                <a-select
                    v-if="distchChannel.length>0"
                    mode="multiple"
                    showArrow
                    v-model="form.chNumList"
                    placeholder="请选择"
                    style="width: 100%" @change="channelOnChange">
                        <a-select-option v-for="(item,index) in distchChannel" :value="item.chName" :key="item.chNum">
                        {{item.chName}}
                        </a-select-option>
                    </a-select>
            </a-form-item>
</a-row>
    <a-row>
        <a-form-item label="执行时间" :label-col="{ span: 5 }"  :wrapper-col="{ span: 19 }">
                      <a-range-picker
                      style="width:400px;"
                        showTime
                        v-model="rangePicker"
                      format="YYYY-MM-DD HH:mm:ss"
                      @change="onProcessChange" />
        </a-form-item>

    </a-row>

     <a-form-item label="状态" :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }">
                <a-col span="12">
                    <a-radio-group @change="onStatusChange" v-model="form.transformStatus">
                            <a-radio :value="true">启用</a-radio>
                            <a-radio :value="false">禁用</a-radio>
                    </a-radio-group>
                </a-col>
                <a-col span="12">
            </a-col>
      </a-form-item>

    <a-form-item label="转单说明" :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }">
            <a-textarea v-model="form.transformAbout" placeholder="请输入转单说明，文字不超过100！" :rows="4" />
    </a-form-item>
  </a-form>
</template>
<script>

import { areaService, transFormService } from '@/services/index'
import moment from 'moment'
const formOrigin = {
  transformName: '',
  fromProductCode: '',
  effectiveDate: '',
  invalidDate: '',
  transformStatus: true,
  transformAbout: '',
  chNumList: ['全部']
}
export default {
  data () {
    return {
      // provinceList: [],
      distchChannel: [],
      spuList: [],
      form: Object.assign({}, formOrigin),
      value: 0,
      rangePicker: []
    }
  },
  methods: {
    setDataByRecord (record) {
      console.log('record:', record)
      if (record) {
        record = JSON.parse(JSON.stringify(record))
        this.form = record
        const { effectiveDate, invalidDate, chNumList } = record
        this.form.chNumList = chNumList.split(',')

        this.rangePicker = [ moment(effectiveDate), moment(invalidDate)]
        console.log('this.rangePicker:', this.rangePicker)
      } else {
        this.form = Object.assign({}, formOrigin)
        this.rangePicker = []
      }
    },
    loadData () {
      transFormService.spuCodeList().then(
        ({ isSuccess, data }) => {
          if (isSuccess) {
            this.spuList = data
          }
        }
      )
      transFormService.distchChannel().then(
        ({ isSuccess, data }) => {
          if (isSuccess) {
            this.distchChannel = [ { chName: '全部', chNum: '全部' }, ...data]
          }
        }
      )
      // areaService.provinceList().then(
      //   ({ isSuccess, data }) => {
      //     if (isSuccess) {
      //       this.provinceList = data
      //     }
      //   }
      // )
    },
    onProcessChange (dates, [effectiveDate, invalidDate]) {
      this.form.effectiveDate = effectiveDate
      this.form.invalidDate = invalidDate
    },
    onStatusChange (e) {
      this.form.transformStatus = e.target.value
    },
    channelOnChange (value) {
      console.log('value:', value)
      if (value.length > 1 && value.includes('全部')) {
        if (value[value.length - 1] == '全部') this.form.chNumList = ['全部']
        else this.form.chNumList = value.filter(s => s !== '全部')
        return
      }
      this.form.chNumList = value
    },
    submit (callback) {
      const { spuCode } = this.$route.query
      console.log('spuCode:', spuCode)
      this.form.productSpuCode = spuCode
      const form = this.form
      const { transformName, fromProductCode, toProductCode, chNumList, effectiveDate, invalidDate, transformAbout } = form
      if (transformName == '' || transformName.length > 50) {
        this.$message.warning('请输入sku名称且转单名称长度不超过50')
        return
      }
      if (fromProductCode == '' || toProductCode == '') {
        this.$message.warning('请正确输入skuCode的转换Code！')
        return
      }
      if (effectiveDate == '' || invalidDate == '') {
        this.$message.warning('请正确输入分单的执行时间范围！')
        return
      }
      if (chNumList.length == 0) {
        this.$message.warning('请正确选择分单的渠道！')
        return
      }
      if (transformAbout == '' || transformAbout.length > 100) {
        this.$message.warning('请输入转单说明，文字不超过100！')
        return
      }

      transFormService.actionDispatchConfig({
        action: 'add',
        transFormConfig: { ...form, chNumList: chNumList.reduce((a, b) => a + ',' + b) }
      }).then(
        ({ isSuccess, data, message }) => {
          if (isSuccess) {
            /*
            还原form
            */
            this.form = Object.assign({}, formOrigin)
            Object.assign(this, {
              rangePicker: [],
              spuCode: ''
            })
            this.$message.success(message)
            if (callback) callback()
          } else {
            this.$message.error(message)
          }
        }
      )
    },
    init () {
      this.form = Object.assign({}, formOrigin)
      this.loadData()
      this.rangePicker = []
    }
  },
  created () {
    this.init()
  }
}
</script>
<style lang="css" scoped>

</style>
